<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <button id="btnGET">get</button>
    <button id="btnPOST">post</button>
    <button id="btnDelete">DELETE</button>
    <button id="btnJSONP">JSONP</button>


    <script>
        $(function () {
        //1测试 get 接口
        $('#btnGET').on('click',function () {
          $.ajax({
            type:'GET',
            url:'http://localhost:3000/api/get',
            data:{name:'zs',age:20},
            success:function (res){
                console.log(res)
            },
          })  
        })
        //2测试 post 接口
        $('#btnPOST').on('click',function () {
          $.ajax({
            type:'POST',
            url:'http://localhost:3000/api/post',
            data:{bookname:'水浒传',author:'施耐庵'},
            success:function (res){
                console.log(res)
            },
          })  
        })


        //3为删除按钮绑定点击事件处理函数
        $('#btnDelete').on('click', function () {
          $.ajax({
            type: 'DELETE',
            url: 'http://localhost:3000/api/delete',
            success:function(res){
              console.log(res)
            }
          })
        })
        
       //4 为 JSONP 按钮绑定点击事件处理函数
       $('#btnJSONP').on('click',function (){
        $.ajax({
          type:'GET',
          url:'http://localhost:3000/api/jsonp',
          dataType: 'jsonp',
          success: function(res) {
            console.log(res)
          }
        })
       })

        })
    </script>
</body>
</html>